﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../js/jq/jquery.lastest.js"></script>
    <script src="../../js/ko/knockout.lastest.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/start/jquery-ui.css" />

    <style type="text/css">
        table
        {
            background-color: #cde;
            padding: 1em;
            border-radius: 0.5em;
        }

        table
        {
            background-color: #cde;
            padding: 1em;
            border-radius: 0.5em;
        }

            table th
            {
                text-align: left;
            }

                table th:last-child
                {
                    min-width: 130px;
                }

        .starRating span
        {
            width: 24px;
            height: 24px;
            background-image: url(stars.png);
            display: inline-block;
            cursor: pointer;
            background-position: -24px 0;
        }

            .starRating span.chosen
            {
                background-position: 0 0;
            }

        .starRating:hover span
        {
            background-position: -24px 0;
        }

            .starRating:hover span.hoverChosen
            {
                background-position: 0 0;
            }
    </style>
    <script type="text/javascript">
        ko.bindingHandlers.fadeVisible = {
            init: function (element, valueAccessor) {
                console.log('fadeVisible.init', element);
                // Start visible/invisible according to initial value
                var shouldDisplay = valueAccessor();
                $(element).toggle(shouldDisplay);
            },
            update: function (element, valueAccessor) {
                console.log('fadeVisible.update', element);
                // On update, fade in/out
                var shouldDisplay = valueAccessor();
                shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();
            }
        };
        ko.bindingHandlers.jqButton = {
            init: function (element) {
                $(element).button(); // Turns the element into a jQuery UI button
            },
            update: function (element, valueAccessor) {
                var currentValue = valueAccessor();
                // Here we just update the "disabled" state, but you could update other properties too
                $(element).button("option", "disabled", currentValue.enable === false);
            }
        };
        ko.bindingHandlers.starRating = {
            init: function (element, valueAccessor) {
                $(element).addClass("starRating");
                for (var i = 0; i < 5; i++)
                    $("<span>").appendTo(element);

                // Handle mouse events on the stars
                $("span", element).each(function (index) {
                    $(this).hover(
                        function () { $(this).prevAll().add(this).addClass("hoverChosen") },
                        function () { $(this).prevAll().add(this).removeClass("hoverChosen") }
                    ).click(function () {
                        var observable = valueAccessor();  // Get the associated observable
                        observable(index + 1);               // Write the new rating to it
                    });
                });
            },
            update: function (element, valueAccessor) {
                // Give the first x stars the "chosen" class, where x <= rating
                var observable = valueAccessor();
                $("span", element).each(function (index) {
                    $(this).toggleClass("chosen", index < observable());
                });
            }
        };

        // ----------------------------------------------------------------------------
        // Page viewmodel
        // ----------------------------------------------------------------------------

        function Answer(text) { this.answerText = text; this.points = ko.observable(1); }

        function SurveyViewModel(question, pointsBudget, answers) {
            this.question = question;
            this.pointsBudget = pointsBudget;
            this.answers = $.map(answers, function (text) { return new Answer(text) });
            this.save = function () { alert('To do') };

            this.pointsUsed = ko.computed(function () {
                var total = 0;
                for (var i = 0; i < this.answers.length; i++)
                    total += this.answers[i].points();
                return total;
            }, this);
        }

        // ----------------------------------------------------------------------------
        // Page init
        // ----------------------------------------------------------------------------

        $(function () {
            ko.applyBindings(new SurveyViewModel("Which factors affect your technology choices?", 10, [
               "Functionality, compatibility, pricing - all that boring stuff",
               "How often it is mentioned on Hacker News",
               "Number of gradients/dropshadows on project homepage",
               "Totally believable testimonials on project homepage"
            ]));
        });
    </script>
</head>
<body>
    <h3 data-bind="text: question"></h3>
    <p>Please distribute <b data-bind="text: pointsBudget"></b>points between the following options.</p>

    <table>
        <thead>
            <tr>
                <th>Option</th>
                <th>Importance</th>
                <th>Star Rate</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: answers">
            <tr>
                <td data-bind="text: answerText"></td>
                <td>
                    <select data-bind="options: [1,2,3,4,5], value: points"></select>
                </td>
                <td data-bind="starRating: points"></td>
            </tr>
        </tbody>
    </table>

    <h3 data-bind="fadeVisible: pointsUsed() > pointsBudget">You've used too many points! Please remove some. (effect)</h3>
    <p>You've got <b data-bind="text: pointsBudget - pointsUsed()"></b>points left to use.</p>
    <button data-bind="enable: pointsUsed() <= pointsBudget, click: save">Finished</button>
    <button data-bind="jqButton: { enable: pointsUsed() <= pointsBudget }, click: save">Finished</button>
</body>
</html>